<template>
  <el-menu :default-active="this.$route.path" mode="horizontal" @select="handleSelect" background-color="#B3C0D1" router>
    <el-menu-item index="/home">首页</el-menu-item>
    <el-menu-item index="/list">博文</el-menu-item>
    <el-menu-item index=""><a href="https://www.baidu.com" target="_blank">生活</a></el-menu-item>
    <el-menu-item index="/login" v-if="isNeedLogin">登录</el-menu-item>
    <el-submenu index="" v-else>
      <template slot="title"><img :src="baseUrl + avatar" alt="" class="user-avatar" />{{username}}</template>
      <el-menu-item index="/admin/">个人中心</el-menu-item>
      <el-menu-item index="/home" @click="cancelLogin">退出登录</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { baseUrl } from "../api";
export default {
  name: "NavMenu",
  data() {
    return {
      baseUrl: baseUrl,
      isNeedLogin: true,  // 是否要登录
      username: '',
      avatar: ''
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    cancelLogin() {
      window.sessionStorage.removeItem('userInfo');
      this.isNeedLogin= true;
    }
  },
  created() {
    let userInfo= window.sessionStorage.getItem('userInfo');
    if(userInfo) {
      userInfo= JSON.parse(userInfo)
      this.username= userInfo.username;
      this.avatar= userInfo.avatar;
      this.isNeedLogin= false;
    }
  }
}
</script>

<style scoped>
  .el-menu {
    float: right;
  }
  .el-menu-item, .el-submenu {
    width: 116px;
  }

  .user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 5px;
    /*animation-name: avatarAnimation;*/
    /*animation-duration: 6s;*/
    /*animation-iteration-count: infinite;*/
    /*animation-timing-function: linear;*/
    animation: avatarAnimation 3s infinite linear;
  }
  @keyframes avatarAnimation {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
